<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import {ref,onMounted} from 'vue'
let firstThree = ref()

const scene = new THREE.Scene()

const group = new THREE.Group()
scene.add(group)

let textureCube = new THREE.CubeTextureLoader()
                  .setPath("./public/Park2/")
                  .load(['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg',])
// 实例化加载器
let gltfLoader = new GLTFLoader();
gltfLoader.load("./public/pbr/轿车.glb",(gltf)=>{
  console.log(gltf);
  gltf.scene.traverse((obj)=>{
    if(obj.isMesh){
      obj.material.envMap = textureCube;
      obj.material.envMapIntensity = 1.0;
      obj.material.metalness = 1.0
      obj.material.roughness = 0.1
    }
  })
  const mesh = gltf.scene.getObjectByName('玻璃01');
  
  mesh.material = new THREE.MeshPhysicalMaterial({
    metalness: 0.0,//玻璃非金属 
    roughness: 0.0,//玻璃表面光滑
    transmission: 1.0, //玻璃材质透光率，transmission替代opacity 
    ior:1.5,//折射率
})  
  group.add(gltf.scene)
})

const axeshelper = new THREE.AxesHelper(100);
scene.add(axeshelper)

// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(-314,316,168)
camera.lookAt(10,5,0) 


// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer({
  antialias:true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(width,height)
function render(){
  requestAnimationFrame(render)
  renderer.render(scene,camera)
}
render()

const controls = new OrbitControls(camera,renderer.domElement)
// controls.target.set(0,0,0)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div>
    <div id="firstThree" ref="firstThree"></div>
  </div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
